<template>
  <div class="content">
    <div class="main" id="maina"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      list: [],
      myChart: undefined,
      timer: null,
      WarningValue: 34, //预警值
      activeColor: [
        {
          gt: 0,
          lte: 1,
          color: "#032DB3",
        },
        {
          gt: 1,
          lte: 2,
          color: "#032DB3",
        },
        {
          gt: 2,
          lte: 3,
          color: "#032DB3",
        },
        {
          gt: 3,
          lte: 4,
          color: "#032DB3",
        },
        {
          gt: 4,
          lte: 5,
          color: "#032DB3",
        },
        {
          gt: 5,
          lte: 6,
          color: "#032DB3",
        },
        {
          gt: 6,
          lte: 7,
          color: "#032DB3",
        },
        {
          gt: 7,
          lte: 8,
          color: "#032DB3",
        },
        {
          gt: 8,
          lte: 9,
          color: "#032DB3",
        },
        {
          gt: 9,
          lte: 10,
          color: "#032DB3",
        },
        {
          gt: 10,
          lte: 11,
          color: "#032DB3",
        },
        {
          gt: 11,
          lte: 12,
          color: "#032DB3",
        },
        // {
        //   gt: 2,
        //   lte: 3,
        //   color: "red",
        // },
        //  {
        //   gt: 3,
        //   lte: 4,
        //   color: "red",
        // },
      ],
      xAxisActive: [
        {
          yAxis: this.WarningValue,
          silent: true,
        },
        {
          xAxis: 1,
          label: {
            formatter: "2.4238",
          },
        },
        {
          xAxis: 4,
          label: {
            formatter: "2.23087",
          },
        },
      ],
      arr: [
        10.792968, 12.4238, 11.78075, 13.41585, 32.23087, 31.1682, 31.53942,
        31.5568, 1.35985, 30.285863, 34.42266, 31.07289,
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.createEcharts();
    });
  },
  methods: {
    createEcharts() {
      this.myChart = echarts.init(document.getElementById("maina"));
      var option = {
        grid: {
          top: 30,
          left: 70,
          right: 20,
          bottom: 35,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
          axisLabel: {
            textStyle: {
              color: "#01B4FF",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: "dashed",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#0A156E",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
        yAxis: {
          type: "value",
          name: "单位(με)",
          min: function (value) {
            return value.min;
          },
          max: function (value) {
            return value.max;
          },
          nameTextStyle: {
            color: "#2BB6FF",
            fontSize: 12,
          },
          axisLabel: {
            textStyle: {
              color: "#01B4FF",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: "dashed",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#0A156E",
              width: 1, //这里是为了突出显示加上的
            },
          },
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: this.activeColor,
        },
        series: [
          {
            markLine: {
              animation: false,
              symbol: "none",
              lineStyle: {
                type: "solid",
                color: "#f00",
                width: 1,
              },
              itemStyle: {
                normal: {
                  color: "#F00",
                  label: {
                    show: true,
                    fontSize: 16,
                    color: "#f00",
                    position: "end",
                    overflow: "none",
                  },
                },
              },
              data: this.xAxisActive,
            },
            data: this.list,
            type: "line",
            areaStyle: {},
            symbol: "none",
            smooth: true,
            lineStyle: {
              color: "#0090FF",
              width: 2,
            },
            // itemStyle: {
            //   color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: "#0336FF",
            //     },
            //     {
            //       offset: 1,
            //       color: "rgba(0,144,255,0.1)",
            //     },
            //   ]),
            // },
          },
        ],
      };

      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
      this.timer = setInterval(() => {
        this.list = [];
        this.xAxisActive = [];
        this.activeColor = [
          {
            gt: 0,
            lte: 1,
            color: "#032DB3",
          },
          {
            gt: 1,
            lte: 2,
            color: "#032DB3",
          },
          {
            gt: 2,
            lte: 3,
            color: "#032DB3",
          },
          {
            gt: 3,
            lte: 4,
            color: "#032DB3",
          },
          {
            gt: 4,
            lte: 5,
            color: "#032DB3",
          },
          {
            gt: 5,
            lte: 6,
            color: "#032DB3",
          },
          {
            gt: 6,
            lte: 7,
            color: "#032DB3",
          },
          {
            gt: 7,
            lte: 8,
            color: "#032DB3",
          },
          {
            gt: 8,
            lte: 9,
            color: "#032DB3",
          },
          {
            gt: 9,
            lte: 10,
            color: "#032DB3",
          },
          {
            gt: 10,
            lte: 11,
            color: "#032DB3",
          },
          {
            gt: 11,
            lte: 12,
            color: "#032DB3",
          },
        ];
        if (this.arr.length) {
          this.arr.forEach((item, index) => {
            if (item > this.WarningValue) {
              // console.log(index, "序号");
              this.activeColor.push({
                gt: index - 1,
                lte: index,
                color: "rgba(232, 13, 66, 0.75)",
              });
              this.activeColor.push({
                gt: index,
                lte: index + 1,
                color: "rgba(232, 13, 66, 0.75)",
              });
              this.xAxisActive.push({
                xAxis: index,
                label: {
                  formatter: String(item.toFixed(1)),
                },
              });
              // console.log(this.activeColor, "this.activeColor");
            }
            this.list.push(item);
          });
          this.myChart.setOption({
            series: [
              {
                data: this.list,
                markLine: {
                  data: this.xAxisActive,
                },
              },
            ],
            visualMap: {
              pieces: this.activeColor,
            },
          });
        }
      }, 1000);
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>
<style  scoped>
.content {
  /* // margin-top: 17px; */
  width: 100%;
  height: 100%;
  /* background: url("../../assets/image/scienceBg.png") 0 0 no-repeat; */
  background-size: 100% 100%;
}
.main {
  height: 100%;
  width: 100%;
  /* // border: 1px solid red; */
}
</style>